import { _decorator, Component, Node, Button } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ScreenSwitcherWithButtonHandlers')
export class ScreenSwitcherWithButtonHandlers extends Component {

    @property([Node])
    public screens: Node[] = []; // 界面数组 A、B、C、D

    @property(Node)
    public btn: Node = null!; // 切换界面的按钮

    private currentIndex: number = 0; // 当前显示的界面索引
    private lastClickedButton: Node | null = null; // 上一个被点击的按钮

    start() {
        // 初始化：显示第一个界面并隐藏其余界面，同时隐藏所有按钮的第二个子物体
        this.screens.forEach((screen, index) => {
            screen.active = index === this.currentIndex;
            this.hideAllSecondChildren(screen);
            if (screen.active) this.setupButtons(screen); // 只为当前显示的界面添加按钮事件
        });

        this.addSwitchClickEvent();
    }

    /**
     * 添加切换界面的按钮点击事件
     */
    private addSwitchClickEvent() {
        const button = this.btn.getComponent(Button);
        if (button) {
            button.node.on(Button.EventType.CLICK, this.switchScreen, this);
        }
    }

    /**
     * 切换界面的逻辑
     */
    private switchScreen() {
        // 隐藏当前界面，更新索引，显示下一个界面
        this.screens[this.currentIndex].active = false;
        this.currentIndex = (this.currentIndex + 1) % this.screens.length;
        this.screens[this.currentIndex].active = true;

        // 切换到新界面时隐藏其所有按钮的第二个子物体并设置点击事件
        this.hideAllSecondChildren(this.screens[this.currentIndex]);
        this.setupButtons(this.screens[this.currentIndex]);
    }

    /**
     * 为界面下的所有按钮添加点击事件
     * @param screen 当前界面
     */
    private setupButtons(screen: Node) {
        screen.children.forEach(child => {
            const button = child.getComponent(Button);
            if (button) {
                // 确保每次切换界面时都重新绑定点击事件
                button.node.off(Button.EventType.CLICK, this.onButtonClicked, this);
                button.node.on(Button.EventType.CLICK, this.onButtonClicked, this);
            }
        });
    }

    /**
     * 隐藏界面中所有按钮的第二个子物体
     * @param screen 当前界面
     */
    private hideAllSecondChildren(screen: Node) {
        screen.children.forEach(child => {
            if (child.children[1]) {
                child.children[1].active = false; // 隐藏每个按钮的第二个子物体
            }
        });
    }

    /**
     * 当按钮被点击时显示其第二个子物体，并隐藏上一个按钮的第二个子物体
     * @param event 点击事件
     */
    private onButtonClicked(event: Event) {
        const buttonNode = event.target as Node;
        const secondChild = buttonNode.children[1]; // 获取当前按钮的第二个子物体

        if (secondChild) {
            // 隐藏上一个按钮的第二个子物体
            if (this.lastClickedButton && this.lastClickedButton !== buttonNode) {
                const lastSecondChild = this.lastClickedButton.children[1];
                if (lastSecondChild) {
                    lastSecondChild.active = false;
                }
            }

            // 显示当前按钮的第二个子物体
            secondChild.active = true;

            // 更新最后点击的按钮
            this.lastClickedButton = buttonNode;
        }
    }
}
